<template>
  <view class="rank_with_legend">
    <view class="rank_row" v-for="(item, index) of rankList" :key="index">
      <view v-if="index === 0">班级</view>
      <view v-if="index === 1">年级</view>
      <view v-if="index === 2">园级</view>
      <view class="rank_line">
        <view class="theBest" :style="{ width: item.theBest }"></view>
        <view class="theGreat" :style="{ width: item.theGreat }"></view>
        <view class="thePassed" :style="{ width: item.thePassed }"></view>
        <view class="theAlmost" :style="{ width: item.theAlmost }"></view>
        <view class="theBad" :style="{ width: item.theBad }"></view>
        <view class="rank_icon" :class="physical" :style="{ left: getRankLeft(item) }"></view>
      </view>
      <view class="rank_value"> 排名{{ item.physicalRanking }} </view>
      <view class="rank_pnum">共{{ item.peopleNum }}人</view>
    </view>
    <view class="rank_legend">
      <view class="per_legend">
        <view class="theBest"></view>
        <text>最棒了</text>
      </view>
      <view class="per_legend">
        <view class="theGreat"></view>
        <text>非常棒</text>
      </view>
      <view class="per_legend">
        <view class="thePassed"></view>
        <text>及格了</text>
      </view>
      <view class="per_legend">
        <view class="theAlmost"></view>
        <text>还差点</text>
      </view>
      <view class="per_legend">
        <view class="theBad"></view>
        <text>有点差</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'rankWithLegend',
  props: {
    rankList: {
      type: Array,
      default: function () {
        return [
          {
            districtName: 'class',
            physicalRanking: 0,
            peopleNum: 0,
            theBest: '0%',
            theGreat: '0%',
            thePassed: '0%',
            theAlmost: '0%',
            theBad: '0%'
          },
          {
            districtName: 'grade',
            physicalRanking: 0,
            peopleNum: 0,
            theBest: '0%',
            theGreat: '0%',
            thePassed: '0%',
            theAlmost: '0%',
            theBad: '0%'
          },
          {
            districtName: null,
            physicalRanking: 0,
            peopleNum: 0,
            theBest: '0%',
            theGreat: '0%',
            thePassed: '0%',
            theAlmost: '0%',
            theBad: '0%'
          }
        ]
      }
    },
    physical: String
  },
  data() {
    return {}
  },
  methods: {
    getRankLeft(item) {
      const splitNum = item.peopleNum - 1 < 0 ? 0 : item.peopleNum - 1
      if (splitNum === 0) {
        return 0
      }
      return (100 / splitNum) * (item.physicalRanking - 1) + '%'
      // return (item.physicalRanking / item.peopleNum) * 100 + '%'
    }
  }
}
</script>

<style lang="scss">
.rank_with_legend {
  background-color: #ffffd7;
  border-radius: 35rpx;
  padding: 44rpx 15rpx 40rpx;
  font-size: 30rpx;

  .rank_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  .rank_line {
    position: relative;
    display: flex;
    width: 300rpx;
    height: 40rpx;
    border: 5rpx solid #0048b5;
    border-radius: 10rpx;

    & > view {
      height: 100%;
    }
  }

  .rank_icon {
    position: absolute;
    bottom: 5rpx;
    transform: translateX(-50%);
    background-size: contain;

    &.height {
      width: 32rpx;
      height: 57rpx;
      background-image: url('#{$BASEURL}/ep_icon_height.png');
    }
    &.weight {
      width: 63rpx;
      height: 46rpx;
      background-image: url('#{$BASEURL}/ep_icon_weight.png');
    }
    &.standingJump {
      width: 55rpx;
      height: 52rpx;
      background-image: url('#{$BASEURL}/ep_icon_standingJump.png');
    }
    &.tennisThrow {
      width: 64rpx;
      height: 53rpx;
      background-image: url('#{$BASEURL}/ep_icon_tennisThrow.png');
    }
    &.balanceBeam {
      width: 34rpx;
      height: 56rpx;
      background-image: url('#{$BASEURL}/ep_icon_balanceBeam.png');
    }
    &.sitAndReach {
      width: 71rpx;
      height: 30rpx;
      background-image: url('#{$BASEURL}/ep_icon_sitAndReach.png');
    }
    &.tenMeterTurn {
      width: 41rpx;
      height: 44rpx;
      background-image: url('#{$BASEURL}/ep_icon_tenMeterTurn.png');
    }
    &.doubleJump {
      width: 33rpx;
      height: 44rpx;
      background-image: url('#{$BASEURL}/ep_icon_doubleJump.png');
    }

    &.drReview {
      width: 34rpx;
      height: 47rpx;
      background-image: url('#{$BASEURL}/ep_icon_drReview.png');
    }
  }

  .rank_value {
    text-align: center;
    width: 120rpx;
    height: 50rpx;
    line-height: 48rpx;
    border-radius: 25rpx;
    background-color: #ffff43;
    font-size: 24rpx;

    @include text-ellipsis();
  }
  .rank_pnum {
    width: 110rpx;
    @include text-ellipsis();
  }

  .rank_legend {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;

    .per_legend {
      text-align: center;
      & > view {
        width: 40rpx;
        height: 20rpx;
        margin: 0 auto 15rpx;
        border-radius: 6rpx;
      }
    }
  }

  .theBest {
    background-color: #ffff43;
  }

  .theGreat {
    background-color: #f0ae2d;
  }

  .thePassed {
    background-color: #ff3d3d;
  }

  .theAlmost {
    background-color: #eb006f;
  }

  .theBad {
    background-color: #ef00d0;
  }
}
</style>
